import React from 'react';
import clsx from 'clsx';
import { makeStyles, createMuiTheme } from '@material-ui/core/styles';
import { ThemeProvider } from '@material-ui/styles';
import Drawer from '@material-ui/core/Drawer';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import List from '@material-ui/core/List';
import CssBaseline from '@material-ui/core/CssBaseline';
import Typography from '@material-ui/core/Typography';
import Divider from '@material-ui/core/Divider';
import IconButton from '@material-ui/core/IconButton';
import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
import ChevronRightIcon from '@material-ui/icons/ChevronRight';
// 抽屉相关
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
// 图标引入 
import MenuIcon from '@material-ui/icons/Menu';
import RemoveIcon from '@material-ui/icons/Remove';
import CloseIcon from '@material-ui/icons/Close';
import AccountBalanceWalletIcon from '@material-ui/icons/AccountBalanceWallet';
import AssessmentIcon from '@material-ui/icons/Assessment';
import CropLandscapeIcon from '@material-ui/icons/CropLandscape';
import ForumIcon from '@material-ui/icons/Forum';
import SettingsIcon from '@material-ui/icons/Settings';
import SearchIcon from '@material-ui/icons/Search';
//
import MainPage from './MainPage';
import SearchPage from './SearchPage';
import SettingPage from './SettingPage';
import AnlayzePage from './AnlayzePage';
import Community from './Community';

const { ipcRenderer } = window.require("electron")

const drawerWidth = 200;
const theme = createMuiTheme({
  palette: {
    primary: {
      light: '#35baf6',
      main: '#03a9f4',
      dark: '#0276aa',
      contrastText: '#fff',
    },
    secondary: {
      light: '#f73378',
      main: '#f50057',
      dark: '#ab003c',
      contrastText: '#000',
    },
  },
});

const useStyles = makeStyles((theme) => ({
  root: {
    display: 'flex',
    flexGrow: 1,
  },
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
    transition: theme.transitions.create(['width', 'margin'], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
  },
  appBarShift: {
    marginLeft: drawerWidth,
    width: `calc(100% - ${drawerWidth}px)`,
    transition: theme.transitions.create(['width', 'margin'], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen,
    }),
  },
  menuButton: {
    paddingLeft: 12,
    paddingRight: 12,
    marginRight: 24,
  },
  menuBar: {
    minHeight: 36,
    paddingLeft: 13,
    paddingRight: 12,
  },
  hide: {
    display: 'none',
  },
  drawer: {
    width: drawerWidth,
    flexShrink: 0,
    whiteSpace: 'nowrap',
  },
  drawerOpen: {
    width: drawerWidth,
    transition: theme.transitions.create('width', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen,
    }),
  },
  drawerClose: {
    transition: theme.transitions.create('width', {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.leavingScreen,
    }),
    overflowX: 'hidden',
    width: theme.spacing(9),
  },
  toolbar: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-end',
    padding: theme.spacing(0),
    minHeight: 44,
  },
  closeButton: {
    outlineColor: "red",
  },
  leftbutton: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'flex-end',
    padding: theme.spacing(0, 0),
  },
  content: {
    flexGrow: 1,
    padding: theme.spacing(0),
  },
  title: {
    flexGrow: 1,
  },
}));

export default function MiniDrawer() {

  const classes = useStyles();
  const [open, setOpen] = React.useState(false);
  const [chose, setChose] = React.useState(0);

  // 抽屉相关
  const handleDrawerOpen = () => {
    setOpen(true);
  };

  const handleDrawerClose = () => {
    setOpen(false);
  };

  // 标题栏相关按钮 
  const minAppWindow = () => {
    ipcRenderer.send('minScreen');
  };
  const maxAppWindow = () => {
    ipcRenderer.send('maxScreen');
  };
  const closeAppWindow = () => {
    ipcRenderer.send('closeScreen');
  };

  return (
    <ThemeProvider theme={theme}>
      <div className={classes.root}>
        <CssBaseline />
        <AppBar
          position="fixed"
          className={clsx(classes.appBar, {
            [classes.appBarShift]: open,
          })}
        >
          <Toolbar variant="dense" className={classes.menuBar}>
            <IconButton
              color="inherit"
              aria-label="open drawer"
              onClick={handleDrawerOpen}
              // edge="start"
              className={clsx(classes.menuButton, {
                [classes.hide]: open,
              })}
            >
              <MenuIcon fontSize="small" />
            </IconButton>
            <Typography className={classes.title} align="left" noWrap>
              Account List
          </Typography>
            <IconButton aria-label="min the window" edge="end" color="inherit" onClick={minAppWindow}>
              <RemoveIcon fontSize="small" />
            </IconButton>
            <IconButton aria-label="max the window" edge="end" color="inherit" onClick={maxAppWindow}>
              <CropLandscapeIcon fontSize="small" />
            </IconButton>
            <IconButton aria-label="close the window" edge="end" color="inherit" className={classes.closeButton} onClick={closeAppWindow}>
              <CloseIcon fontSize="small" />
            </IconButton>
          </Toolbar>
        </AppBar>
        <Drawer
          variant="permanent"
          className={clsx(classes.drawer, {
            [classes.drawerOpen]: open,
            [classes.drawerClose]: !open,
          })}
          classes={{
            paper: clsx({
              [classes.drawerOpen]: open,
              [classes.drawerClose]: !open,
            }),
          }}
        >
          <div className={classes.leftbutton}>
            <IconButton onClick={handleDrawerClose}>
              {theme.direction === 'rtl' ? <ChevronRightIcon /> : <ChevronLeftIcon />}
            </IconButton>
          </div>
          <Divider />
          <List>
            <ListItem button key='流水账' onClick={() => { setChose(0); }}>
              <ListItemIcon >
                <AccountBalanceWalletIcon color="primary" fontSize="large" />
              </ListItemIcon>
              <ListItemText primary={'流水账'} secondary="记一笔？" />
            </ListItem>
            <Divider />
            <ListItem button key='搜索' onClick={() => { setChose(1); }}>
              <ListItemIcon >
                <SearchIcon color="primary" fontSize="large" />
              </ListItemIcon>
              <ListItemText primary={'搜索'} secondary="来个条件筛选一下？" />
            </ListItem>
            <Divider />
            <ListItem button key='分析报告' onClick={() => { setChose(2); }}>
              <ListItemIcon >
                <AssessmentIcon color="primary" fontSize="large" />
              </ListItemIcon>
              <ListItemText primary={'分析报告'} secondary="钱是怎么没的呢？" />
            </ListItem>
            <Divider />
            <ListItem button key='社区' onClick={() => { setChose(3); }}>
              <ListItemIcon >
                <ForumIcon color="primary" fontSize="large" />
              </ListItemIcon>
              <ListItemText primary={'社区'} secondary="发现有趣的灵魂~" />
            </ListItem>
            <Divider />
            <ListItem button key='设置' onClick={() => { setChose(4); }}>
              <ListItemIcon >
                <SettingsIcon color="primary" fontSize="large" />
              </ListItemIcon>
              <ListItemText primary={'设置'} secondary="修修改改~" />
            </ListItem>
            <Divider />
          </List>
        </Drawer>
        <main className={classes.content}>
          <div className={classes.toolbar} />
          {chose == 0 ? <MainPage /> :
            chose == 1 ? <SearchPage /> :
              chose == 2 ? <AnlayzePage /> :
                chose == 3 ? <Community /> :
                  <SettingPage />}
        </main>
      </div>
    </ThemeProvider >
  );
}